<template>
  <div class="mark" @click.self="closeFun">
    <div v-if="previewData.type === 1" class="box">
      <el-icon @click="closeFun"><close-bold /></el-icon>
      <el-image style="width: 100%; height: 100%" :src="previewData.media_file.absolute_url" fit="contain"></el-image>
    </div>
    <div v-if="previewData.type === 2" class="box">
      <el-icon @click="closeFun"><close-bold /></el-icon>
      <div :class="play ? 'pause' : 'play'" v-show="!play" @click="playVideo"></div>
      <video :src="previewData.media_file.absolute_url" style="width: 100%; height: 100%" class="video"></video>
      <div class="buttom">
        <div :class="play ? 'pause' : 'play'" @click="playVideo"></div>
        <el-progress :percentage="progress" status="success" :show-text="false" />
        <span class="time">{{ startTime }} / {{ endTime }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import bus from '@/utils/bus'
  import { Zero } from '@/utils/cycletime'

  const previewData = ref({})
  const play = ref(false)
  const startTime = ref('00:00')
  const endTime = ref('00:00')
  const progress = ref(0)

  const preview = (item: any) => {
    previewData.value = item
    setTimeout(() => {
      videoTime()
    }, 200)
  }

  const closeFun = () => {
    bus.emit('closeMark')
  }

  const playVideo = () => {
    let video = document.querySelector('.video')

    let startime = setInterval(() => {
      if (startTime.value === endTime.value) {
        play.value = !play.value
        clearInterval(startime)
      }
      playTime()
    }, 1000)

    if (!play.value) {
      video.play()
      startime
      play.value = !play.value
    } else {
      video.pause()
      clearInterval(startime)
      play.value = !play.value
    }
  }

  const videoTime = () => {
    let video = document.querySelector('.video')
    let end = `${Zero(Math.floor(video.duration / 60))}:${Zero(Math.floor(video.duration % 60))}`
    endTime.value = end
  }

  const playTime = () => {
    let video = document.querySelector('.video')
    let start = `${Zero(Math.floor(video.currentTime / 60))}:${Zero(Math.floor(video.currentTime % 60))}`

    let percent = (video.currentTime / video.duration) * 100
    progress.value = percent

    startTime.value = start
  }

  bus.on('preview', preview)
</script>

<style lang="scss" scoped>
  .mark {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: 0.6);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    .box {
      width: 1200px;
      height: 700px;
      background: #fff;
      position: relative;
      .el-icon {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 20px;
        top: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #999;
        z-index: 1;
      }
      .play {
        width: 60px;
        height: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        background: url('@/assets/image/material/play.png') no-repeat;
        background-size: cover;
        cursor: pointer;
      }
      .pause {
        width: 60px;
        height: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        background: url('@/assets/image/material/suspend_icon.png') no-repeat;
        background-size: cover;
        cursor: pointer;
      }
      .buttom {
        width: 100%;
        height: 25px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        z-index: 999;
        position: relative;
        top: -25px;
        background: rgba($color: #000000, $alpha: 0.8);
        .play {
          width: 20px;
          height: 20px;
          z-index: 2;
          position: absolute;
          top: 50%;
          left: 2%;
          background: url('@/assets/image/material/play.png') no-repeat;
          background-size: cover;
          cursor: pointer;
        }
        .pause {
          width: 10px;
          height: 10px;
          z-index: 2;
          position: absolute;
          top: 50%;
          left: 2%;
          background: url('@/assets/image/material/suspend_icon.png') no-repeat;
          background-size: cover;
          cursor: pointer;
        }
        .el-progress {
          width: 80%;
        }
        .time {
          font-size: 10px;
          color: white;
        }
      }
    }
  }
</style>
